<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
        <meta name="author" content="Coderthemes">

        <link rel="shortcut icon" href="assets/images/favicon_1.ico">

        <title>Ubold - Responsive Admin Dashboard Template</title>

        <link href="../plugins/owl.carousel/dist/assets/owl.carousel.min.css" rel="stylesheet" type="text/css" />
        <link href="../plugins/owl.carousel/dist/assets/owl.theme.default.min.css" rel="stylesheet" type="text/css" />

        <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/icons.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/style.css" rel="stylesheet" type="text/css" />

        <script src="assets/js/modernizr.min.js"></script>


    </head>


    <body class="fixed-left" id="do-nicescrol">
        <!-- Page-Title -->
        <div class="row">
            <div class="col-sm-12">
                <div class="btn-group pull-right m-t-15">
                    <button type="button" class="btn btn-default dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">Settings</button>
                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="btnGroupDrop1">
                        <a class="dropdown-item" href="ui-carousel.html#">Dropdown One</a>
                        <a class="dropdown-item" href="ui-carousel.html#">Dropdown Two</a>
                        <a class="dropdown-item" href="ui-carousel.html#">Dropdown Three</a>
                        <a class="dropdown-item" href="ui-carousel.html#">Dropdown Four</a>
                    </div>
                </div>

                <h4 class="page-title">轮播</h4>
               <p class="text-muted page-title-alt">欢迎来到Ubold管理面板 !</p>

            </div>
        </div>


        <div class="row">
            <div class="col-12">
                <div class="card-box">
                    <div class="row">
                        <div class="col-12">
                            <h4 class=" m-t-0 header-title">Bootstrap 轮播</h4>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-6">

                            <p class="text-muted m-b-30 font-13">使用<code>.carousel-caption</code>任何内容中的元素轻松地为您的幻灯片添加字幕<code>.carousel-item</code>. </p>

                            <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
                                <ol class="carousel-indicators">
                                    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
                                    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
                                    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
                                </ol>
                                <div class="carousel-inner" role="listbox">
                                    <div class="carousel-item active">
                                        <img class="d-block img-fluid" src="assets/images/big/img1.jpg" alt="First slide" />
                                        <div class="carousel-caption d-none d-md-block">
                                            <h3 class="text-white">First slide label</h3>
                                            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                                        </div>
                                    </div>
                                    <div class="carousel-item">
                                        <img class="d-block img-fluid" src="assets/images/big/img2.jpg" alt="Second slide" />
                                        <div class="carousel-caption d-none d-md-block">
                                            <h3 class="text-white">Second slide label</h3>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                        </div>
                                    </div>
                                    <div class="carousel-item">
                                        <img class="d-block img-fluid" src="assets/images/big/img3.jpg" alt="Third slide" />
                                        <div class="carousel-caption d-none d-md-block">
                                            <h3 class="text-white">Third slide label</h3>
                                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                                        </div>
                                    </div>
                                </div>
                                <a class="carousel-control-prev" href="ui-carousel.html#carouselExampleCaptions" role="button" data-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                    <span class="sr-only">Previous</span>
                                </a>
                                <a class="carousel-control-next" href="ui-carousel.html#carouselExampleCaptions" role="button" data-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                    <span class="sr-only">Next</span>
                                </a>
                            </div>
                        </div>

                        <div class="col-lg-6 m-t-sm-40">

                            <p class="text-muted m-b-30 font-13">使用e <code>.carousel-caption</code> 任何内容中的元素轻松地为您的幻灯片添加字幕 <code>.carousel-item</code>. </p>

                            <!-- START carousel-->
                            <div id="carouselExample" class="carousel slide" data-ride="carousel">
                                <ol class="carousel-indicators">
                                    <li data-target="#carouselExample" data-slide-to="0" class="active"></li>
                                    <li data-target="#carouselExample" data-slide-to="1"></li>
                                    <li data-target="#carouselExample" data-slide-to="2"></li>
                                </ol>
                                <div class="carousel-inner" role="listbox">
                                    <div class="carousel-item active">
                                        <img class="d-block img-fluid" src="assets/images/big/img4.jpg" alt="First slide" />
                                    </div>
                                    <div class="carousel-item">
                                        <img class="d-block img-fluid" src="assets/images/big/img1.jpg" alt="Second slide" />
                                    </div>
                                    <div class="carousel-item">
                                        <img class="d-block img-fluid" src="assets/images/big/img2.jpg" alt="Third slide" />
                                    </div>
                                </div>
                            </div>
                            <!-- END carousel-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- end row -->


        <div class="row">
            <div class="col-sm-12">
                <div class="card-box">
                    <div class="row">
                        <div class="col-sm-12">
                            <h4 class=" m-t-0 header-title"><b>Owl 轮播</b></h4>
                        </div>
                    </div>
                    <!-- Slider/ Carousel -->
                    <div class="row">
                        <div class="col-md-6">

                            <p class="text-muted m-b-30 font-13">循环播放元素的幻灯片组件，如旋转木马.</p>

                            <div class="panel panel-default text-center slider-bg m-b-0" style="background: url('assets/images/big/img5.jpg');">
                                <div class="panel-body p-0">
                                    <div class="">
                                        <div id="owl-slider" class="owl-carousel">
                                            <div class="item">
                                                <h3><a href="ui-carousel.html#" class="text-custom font-600">Hey! Welcome to Ubold</a></h3>
                                                <p class="small">27 August, 2015</p>
                                                <p class="m-t-30"><em>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</em></p>
                                                <button class="btn btn-default btn-sm m-t-40">Read more</button>
                                            </div><!-- /.item -->

                                            <div class="item">
                                                <h3><a href="ui-carousel.html#" class="text-primary font-600">Hey! Welcome to Ubold</a></h3>
                                                <p class="small">24 August, 2015</p>
                                                <p class="m-t-30"><em>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</em></p>
                                                <button class="btn btn-primary btn-sm m-t-40">Read more</button>
                                            </div><!-- /.item -->

                                            <div class="item">
                                                <h3><a href="ui-carousel.html#" class="text-pink font-600">Hey! Welcome to Ubold</a></h3>
                                                <p class="small">21 August, 2015</p>
                                                <p class="m-t-30"><em>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</em></p>
                                                <button class="btn btn-pink btn-sm m-t-40">Read more</button>
                                            </div><!-- /.item -->

                                        </div><!-- /#tiles-slide-1 -->
                                    </div><!-- /.panel-body -->
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">

                            <p class="text-muted m-b-30 font-13">A slideshow component for cycling through elements, like a carousel.</p>

                            <div class="panel panel-default text-center text-white slider-bg m-b-0" style="background: url('assets/images/big/img4.jpg');">
                                <div class="slider-overlay br-radius"></div>
                                <div class="panel-body p-0">
                                    <div class="">
                                        <div id="owl-slider-2" class="owl-carousel">
                                            <div class="item">
                                                <h3><a href="ui-carousel.html#" class="text-white font-600">Hey! Welcome to Ubold</a></h3>
                                                <p class="small">02 April, 2015</p>
                                                <p class="m-t-30"><em>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</em></p>
                                                <button class="btn btn-warning btn-sm m-t-40">Read more</button>
                                            </div><!-- /.item -->

                                            <div class="item">
                                                <h3><a href="ui-carousel.html#" class="text-white font-600">Hey! Welcome to Ubold</a></h3>
                                                <p class="small">02 April, 2015</p>
                                                <p class="m-t-30"><em>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</em></p>
                                                <button class="btn btn-warning btn-sm m-t-40">Read more</button>
                                            </div><!-- /.item -->

                                            <div class="item">
                                                <h3><a href="ui-carousel.html#" class="text-white font-600">Hey! Welcome to Ubold</a></h3>
                                                <p class="small">02 April, 2015</p>
                                                <p class="m-t-30"><em>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</em></p>
                                                <button class="btn btn-warning btn-sm m-t-40">Read more</button>
                                            </div><!-- /.item -->
                                        </div><!-- /#tiles-slide-2 -->
                                    </div>
                                </div> <!-- panel-body -->
                            </div><!-- Panel -->
                        </div> <!-- col-->

                    </div>  <!-- End row -->
                </div>
            </div>
        </div> <!-- end row -->

        <div class="row">
            <div class="col-sm-12">
                <div class="card-box">

                    <h4 class=" m-t-0 header-title"><b>Owl Carousel</b></h4>
                    <p class="text-muted m-b-30 font-13">A slideshow component for cycling through elements, like a carousel.</p>

                    <div class="owl-carousel owl-theme" id="owl-multi">
                        <div class="item">
                            <img src="assets/images/gallery/1.jpg" />
                        </div>
                        <div class="item">
                            <img src="assets/images/gallery/2.jpg" />
                        </div>
                        <div class="item">
                            <img src="assets/images/gallery/3.jpg" />
                        </div>
                        <div class="item">
                            <img src="assets/images/gallery/4.jpg" />
                        </div>
                        <div class="item">
                            <img src="assets/images/gallery/5.jpg" />
                        </div>
                        <div class="item">
                            <img src="assets/images/gallery/6.jpg" />
                        </div>
                        <div class="item">
                            <img src="assets/images/gallery/7.jpg" />
                        </div>
                        <div class="item">
                            <img src="assets/images/gallery/8.jpg" />
                        </div>
                        <div class="item">
                            <img src="assets/images/gallery/9.jpg" />
                        </div>
                        <div class="item">
                            <img src="assets/images/gallery/10.jpg" />
                        </div>

                    </div>
                </div>
            </div>
        </div>


        <script>
            var resizefunc = [];
        </script>

        <!-- jQuery  -->
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/popper.min.js"></script><!-- Popper for Bootstrap -->
        <script src="assets/js/bootstrap.min.js"></script>
        <script src="assets/js/detect.js"></script>
        <script src="assets/js/fastclick.js"></script>
        <script src="assets/js/jquery.slimscroll.js"></script>
        <script src="assets/js/jquery.blockUI.js"></script>
        <script src="assets/js/waves.js"></script>
        <script src="assets/js/wow.min.js"></script>
        <script src="assets/js/jquery.nicescroll.js"></script>
        <script src="assets/js/jquery.scrollTo.min.js"></script>

        <script src="assets/js/jquery.core.js"></script>
        <script src="assets/js/jquery.app.js"></script>

        <script src="../plugins/owl.carousel/dist/owl.carousel.min.js"></script>

        <script type="text/javascript">
            jQuery(document).ready(function($) {
                //owl carousel
                $("#owl-slider").owlCarousel({
                    loop:true,
                    nav:false,
                    autoplay:true,
                    autoplayTimeout:4000,
                    autoplayHoverPause:true,
                    animateOut: 'fadeOut',
                    responsive:{
                        0:{
                            items:1
                        },
                        600:{
                            items:1
                        },
                        1000:{
                            items:1
                        }
                    }
                });

                $("#owl-slider-2").owlCarousel({
                    loop:false,
                    nav:false,
                    autoplay:true,
                    autoplayTimeout:4000,
                    autoplayHoverPause:true,
                    responsive:{
                        0:{
                            items:1
                        },
                        600:{
                            items:1
                        },
                        1000:{
                            items:1
                        }
                    }
                });

                //Owl-Multi
                $('#owl-multi').owlCarousel({
                    loop:true,
                    margin:20,
                    nav:false,
                    autoplay:true,
                    responsive:{
                        0:{
                            items:1
                        },
                        480:{
                            items:2
                        },
                        700:{
                            items:4
                        },
                        1000:{
                            items:3
                        },
                        1100:{
                            items:5
                        }
                    }
                })
            });

        </script>

    </body>
</html>